/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <div class="subject">
        <h3>分销商等级</h3>
      </div>
      <ul class="tab-base nc-row">
        <router-link :to="{name:'distribut'}">
          <li>
            <a>
              <span>默认分销规则</span>
            </a>
          </li>
        </router-link>
      </ul>
    </div>
    <div
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>分销商等级, 由平台设置管理.</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>
    <div class="mDiv">
      <div class="fbutton">
        <div class="add" @click="toAdd()">
          <span>
            <i class="el-icon-circle-plus" /> 添加新等级
          </span>
        </div>
      </div>
    </div>
    <div class="tablebox">
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column label="等级名称" prop="level_name" width="100"></el-table-column>
        <el-table-column label="一级佣金比例(%)" prop="rate1" width="150" :formatter="rate1ToFixed"></el-table-column>
        <el-table-column label="二级佣金比例(%)" prop="rate2" width="150" :formatter="rate2ToFixed"></el-table-column>
        <el-table-column label="三级佣金比例(%)" prop="rate3" width="150" :formatter="rate3ToFixed"></el-table-column>
        <el-table-column label="升级条件" prop="order_money" width="200" :formatter="conditionDesc"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="small" icon="el-icon-edit-outline" @click="toEdit(scope.row)">编辑</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :modal-append-to-body="false"
      width="30%"
      center
    >
      <el-form :model="form" label-width="150px">
        <el-form-item label="等级名称" required>
          <el-input v-model="form.level_name" size="mini"></el-input>
          <p
            class="err-msg"
            v-if="errResult.level_name && !form.level_name"
          >{{errResult.level_name}}</p>
        </el-form-item>
        <el-form-item label="一级佣金比例">
          <el-input v-model="form.rate1" size="mini" style="width:0px">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="二级佣金比例">
          <el-input v-model="form.rate2" size="mini" style="width:0px">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="三级佣金比例">
          <el-input v-model="form.rate3" size="mini" style="width:0px">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="升级条件" style="width:420px">
          <el-input type="text" v-model="form.order_money" size="mini">
            <template slot="prepend">累计获佣金额满</template>
            <template slot="append">元</template>
          </el-input>
          <p class="help-block">分销商升级条件，不填写默认为不自动升级</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit()" :loading="isLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getConfigs,
  getDistributLevel,
  updateDistributLevel,
  addDistributLevel
} from "@/utils/api";
export default {
  data() {
    return {
      tableData: [],
      form: {},
      defaultLevel: {},
      dialogTitle: "",
      dialogFormVisible: false,
      isLoading: false,
      errResult: {}
    };
  },
  components: {},
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      var that = this;
      getConfigs({
        inc_type: "distribut"
      }).then(function(res) {
        that.tableData = [
          {
            level_name: "默认分销商",
            rate1: res.distribut.first_rate,
            rate2: res.distribut.second_rate,
            rate3: res.distribut.third_rate,
            order_money: 0
          }
        ];
        getDistributLevel().then(function(res) {
          res.forEach(element => {
            that.tableData.push(element);
          });
        });
      });
    },
    conditionDesc(row) {
      if (row.order_money == 0) {
        return "不自动升级";
      }
      return "累计获佣金额满" + row.order_money.toFixed(2) + "元";
    },
    rate1ToFixed(row) {
      return parseFloat(row.rate1).toFixed(2);
    },
    rate2ToFixed(row) {
      return parseFloat(row.rate2).toFixed(2);
    },
    rate3ToFixed(row) {
      return parseFloat(row.rate3).toFixed(2);
    },
    toAdd() {
      this.form = {};
      this.dialogTitle = "新增分销商等级";
      this.dialogFormVisible = true;
    },
    toEdit(row) {
      if (row.level_id == null) {
        this.$router.push({
          name: "distribut"
        });
        return;
      }
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogTitle = "编辑分销商等级";
      this.dialogFormVisible = true;
    },
    onSubmit() {
      this.isLoading = true;
      var that = this;
      if (this.form.level_id) {
        //编辑
        updateDistributLevel(this.form).then(function(res) {
          if (res.status == 1) {
            that.$message.success("保存成功");
            that.dialogFormVisible = false;
            that.getTableData();
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.isLoading = false;
        });
      } else {
        //添加
        addDistributLevel(this.form).then(function(res) {
          if (res.status == 1) {
            that.$message.success("保存成功");
            that.dialogFormVisible = false;
            that.getTableData();
          } else if (res.status == -1) {
            that.$message.error("参数错误");
            that.errResult = res.result;
          } else {
            that.$message.error(res.msg);
          }
          that.isLoading = false;
        });
      }
    }
  }
};
</script>

<style scoped>
>>> .el-input__inner {
  width: 150px;
}
</style>
